<template>
    <div class="assessment-result-page">
        <x-header :left-options="{showBack: true, backText: '', preventGoBack:true}" @on-click-back="goBackPage" class="gradient-color">额度评估</x-header>
        <div class="result-box">
            <!--表盘开始-->
            <div class="dash-board">
                <div class="circle" :style="{ transform: dashRotate }">
                    <div class="square"></div>
                </div>
                <div class="result">
                    <p>您的额度评估如下</p>
                    <p>￥<span>{{ quota }}</span></p>
                </div>
            </div>
            <!--表盘结束-->
            <!--波浪开始-->
            <div class="waveWrapper gradient-color waveAnimation">
                <div class="waveWrapperInner bgTop">
                    <div class="wave waveTop"></div>
                </div>
                <div class="waveWrapperInner bgMiddle">
                    <div class="wave waveMiddle"></div>
                </div>
                <div class="waveWrapperInner bgBottom">
                    <div class="wave waveBottom"></div>
                </div>
            </div>
            <!--波浪结束-->
        </div>
        <FBlockTitle title="为你推荐" v-if="prodList.length"></FBlockTitle>
        <FProdList :lists="prodList" @on-click-prodItem="handleProductJump" v-if="prodList.length"></FProdList>
    </div>
</template>

<script>
    /**
     * Created by c.y on 2018/3/16.
     * 额度评估的结果页
     */
    import FBlockTitle from '../../components/common/FBlockTitle.vue';
    import FProdList from '../../components/common/FProdList.vue';
    import systemApi from '../../api/api';
    import statusCodeManage from '../../api/statusCodeManage';
    import {XHeader} from 'vux';

    export default {
        name: 'f-assessment-result',
        data() {
            return {
                dashRotate: 'rotate(0deg)',
                quota: 0, // 额度结果
                prodList: [] // 产品列表
            }
        },
        components: {
            FBlockTitle,
            FProdList,
            XHeader
        },
        methods: {
            goBackPage(){
                this.$router.push({path:'f-main'});
            },
            // 处理产品跳转
            handleProductJump (item) {
                // 极速贷款或者银行卡
                if (item.productType === 40000005 || item.productType === 40000006) {
                    this.$router.push({
                        path: '/f-loan-detail',
                        query: {
                            id: item.prodId,
                        }
                    });
                    // 信用卡
                } else if (item.productType === 40000007) {
                    this.$router.push({
                        path: '/credit-detail',
                        query: {
                            id: item.prodId,
                        }
                    });
                }
            },
            // 获取Attr的列表, prodElements产品组件的元素列表
            getAttrList (prodElements) {
                // 获取用户修改的数据
                let attrList = [];
                if (prodElements instanceof Array) {
                    prodElements.map(function (listItem) {
                        listItem.attrs.forEach(function (item) {
                            attrList.push(item.value);
                        });
                    });
                }
                return attrList;
            },
            init () {
                let _this = this;
                systemApi.fetchPushProd().then((res) => {
                    res.body.forEach(function (item) {
                        _this.prodList.push({
                            prodId: item.unit.prodId,
                            content: _this.getAttrList(item.showEles),
                            productType: item.unit.prodType,
                            applyNumber: item.unit.showNumPrefix + item.unit.showNum
                        });
                    });
                }, (error) => {
                    statusCodeManage.showTipOfStatusCode(error,_this);
                });
            }
        },
        activated: function () {
            let _this = this;
            this.quota = 0;
            if (this.$route.query.quota) {
                this.quota = this.$route.query.quota;
            }
            this.prodList=[];
            this.init();
            setTimeout(function () {
                _this.dashRotate = 'rotate(200deg)';
            }, 500);
        }
    }
</script>

<style lang="less">
    @import "../../style/mixin";
    .assessment-result-page {
        .result-box {
            padding-top: 38px;
            .color-linear-gradient(@color-gradient-darkBlue-left, @color-gradient-darkBlue-right);
        }
        .vux-header {
            .color-linear-gradient(@color-primary-light, @color-primary, 90deg);
            .vux-header-title {
                font-size: 18px;
            }
            .vux-header-left {
                .left-arrow:before {
                    border: solid 1px @color-white;
                    border-width: 2px 0 0 2px;
                }
            }
            .vux-header-right{
                color: @color-white !important;
            }
        }
    }
    @keyframes move_wave {
        0% {
            transform: translateX(0) translateZ(0) scaleY(1)
        }
        50% {
            transform: translateX(-25%) translateZ(0) scaleY(1)
        }
        100% {
            transform: translateX(0) translateZ(0) scaleY(1)
        }
    }

    .waveWrapper {
        height: 68px;
        overflow: hidden;
        position: relative;
    }

    .waveWrapperInner {
        position: absolute;
        width: 100%;
        overflow: hidden;
        height: 100%;
        bottom: -1px;
    }

    .bgTop {
        z-index: 15;
        opacity: 0.5;
    }

    .bgMiddle {
        z-index: 10;
        opacity: 0.75;
    }

    .bgBottom {
        z-index: 5;
    }

    .wave {
        position: absolute;
        left: 0;
        width: 200%;
        height: 100%;
        background-repeat: repeat no-repeat;
        background-position: 0 bottom;
        transform-origin: center bottom;
    }

    .waveTop {
        background-size: 60% 60px;
        background-image: url(../../assets/img/wave-top.png);
    }

    .waveAnimation .waveTop {
        animation: move-wave 3s infinite;
        -webkit-animation: move-wave 3s;
        -webkit-animation-delay: 1s;
        animation-delay: 1s;
    }

    .waveMiddle {
        background-size: 60% 60px;
        background-image: url(../../assets/img/wave-mid.png);
    }

    .waveAnimation .waveMiddle {
        animation: move_wave 10s linear infinite;
    }

    .waveBottom {
        background-size: 60% 60px;
        background-image: url(../../assets/img/wave-bot.png);
    }

    .waveAnimation .waveBottom {
        animation: move_wave 15s linear infinite;
    }

    .dash-board {
        position: relative;
        width: 100%;
        height: 200px;
        text-align: center;
        color: @color-white;
        font-size: @font-size-medium;
        &:before {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 2px solid #68c1f8;
            border-bottom-color: transparent;
        }
        &:after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 140px;
            height: 140px;
            border-radius: 50%;
            border: 6px solid #a1e1fe;
            border-bottom-color: transparent;
        }
        .result {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            p {
                &:first-child {
                    font-size: @font-size-medium;
                }
                &:last-child {
                    font-size: 20PX;
                    span {
                        font-size: 30PX;
                    }

                }
            }
        }
        .circle {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            border-radius: 50%;
            border: 1px solid transparent;
            position: relative;
            transform: rotate(0deg);
            transition: all 1s;
            .square {
                position: absolute;
                left: 25px;
                bottom: 30px;
                width: 6px;
                height: 6px;
                margin-left: -6px;
                border-radius: 50%;
                border: 2px solid #9ddcfc;
                background-color: @color-white;
            }
        }
    }
</style>
